<script setup>
import { Link } from '@inertiajs/vue3';
import { computed } from 'vue';

const props = defineProps({
    links: {
        type: Array,
        default: () => [],
    }
});

const formatLabel = (label = '') => {
    if (typeof label !== 'string') {
        return ''
    }
    const cleaned = label
        .replace('&laquo;', '')
        .replace('&raquo;', '')
        .trim()
    if (/previous/i.test(label)) {
        return '上一页'
    }
    if (/next/i.test(label)) {
        return '下一页'
    }
    return cleaned
}

// 获取上一页和下一页链接
const prevLink = computed(() => {
    if (!props.links || !Array.isArray(props.links)) return null;
    return props.links.find(link => link && link.label && /previous/i.test(link.label));
});

const nextLink = computed(() => {
    if (!props.links || !Array.isArray(props.links)) return null;
    return props.links.find(link => link && link.label && /next/i.test(link.label));
});

// 获取页码链接
const pageLinks = computed(() => {
    if (!props.links || !Array.isArray(props.links)) return [];
    return props.links.filter(link => 
        link && 
        link.label && 
        !/previous/i.test(link.label) && 
        !/next/i.test(link.label) && 
        !link.label.includes('...')
    );
});

// 获取当前页码
const currentPage = computed(() => {
    const activeLink = pageLinks.value.find(link => link && link.active);
    return activeLink?.label || '1';
});
</script>

<template>
    <div class="flex flex-col items-center space-y-4">
        <!-- 分页链接 -->
        <div class="flex justify-center gap-2">
            <!-- 移动端只显示上一页和下一页 -->
            <div class="sm:hidden flex gap-2">
                <div v-if="!prevLink?.url" 
                    class="px-3 py-2 text-sm text-gray-500 bg-white border border-gray-300 rounded-md dark:text-zinc-400 dark:bg-zinc-800 dark:border-zinc-700"
                >
                    上一页
                </div>
                <Link
                    v-else
                    :href="prevLink.url"
                    class="px-3 py-2 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:border-primary-500 focus:text-primary-600 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700 dark:focus:border-primary-500 dark:focus:text-primary-400"
                >
                    上一页
                </Link>

                <div v-if="!nextLink?.url" 
                    class="px-3 py-2 text-sm text-gray-500 bg-white border border-gray-300 rounded-md dark:text-zinc-400 dark:bg-zinc-800 dark:border-zinc-700"
                >
                    下一页
                </div>
                <Link
                    v-else
                    :href="nextLink.url"
                    class="px-3 py-2 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:border-primary-500 focus:text-primary-600 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700 dark:focus:border-primary-500 dark:focus:text-primary-400"
                >
                    下一页
                </Link>
            </div>

            <!-- 桌面端显示完整分页 -->
            <div class="hidden sm:flex flex-wrap justify-center gap-1">
                <template v-for="(link, key) in links" :key="key">
                    <div v-if="link.url === null" 
                        class="px-3 py-2 text-sm text-gray-500 bg-white border border-gray-300 rounded-md dark:text-zinc-400 dark:bg-zinc-800 dark:border-zinc-700"
                        v-text="formatLabel(link.label)" 
                    />
                    <Link
                        v-else
                        :href="link.url"
                        class="px-3 py-2 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:border-primary-500 focus:text-primary-600 dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700 dark:focus:border-primary-500 dark:focus:text-primary-400"
                        :class="{ 'bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-900/30 dark:border-primary-500 dark:text-primary-400': link.active }"
                        v-text="formatLabel(link.label)"
                    />
                </template>
            </div>
        </div>

        <!-- 当前页码信息 -->
        <div class="text-sm text-gray-500 dark:text-zinc-400">
            第 {{ currentPage }} 页
        </div>
    </div>
</template>

<style scoped>
.transition-colors {
    transition: all 0.2s ease-in-out;
}
</style> 